<link href="/statics/front/css/jquery.lightbox.css" rel="stylesheet">
<script src="/statics/front/js/plugins/jquery.lightbox.js"></script>
<ul class="comment-list row">
  <?php foreach($commentList as $key=>$comment):?>
  <?php $Mod = $key%2;?>
  <?php if($Mod):?><?php endif;?>
    <li>
      <div class="product-img col-md-2 <?php if($Mod):?>col-md-push-10<?php endif;?>">
        <img src="/statics/front/images/product-details/avatar-circle.png" alt="avatar" class="hi-sm hi-xs">
        <strong class="text"><?php echo $comment['email'];?></strong>
      </div>
      <div class="comment-info col-md-10 <?php if($Mod):?>col-md-pull-2<?php endif;?>">
        <div class="comment-head">
          <div class="<?php if($Mod):?>right<?php else:?>left<?php endif;?> star">
            <?php for($star=0;$star<$comment['star'];$star++):?>
            <span class="fa fa-star"></span>
            <?php endfor;?>
            <?php for($star=0;$star<(5-$comment['star']);$star++):?>
            <span class="fa fa-star-o"></span>
            <?php endfor;?>
          </div>
        </div>
        <div class="comment-desc" title="<?php echo $comment['content'];?>">
          <i class="<?php if($Mod):?>triangle-right<?php else:?>triangle-left<?php endif;?>"></i>
          <div><span class="text content"><?php echo $comment['content'];?></span></div>
          <div class="comment-img">
            <?php foreach($comment['photo'] as $photo):?>
                <a href="<?php echo $photo['img'];?>" rel="lightbox-<?php echo $key;?>"><img src="<?php echo $photo['img'];?>" alt=""/></a>           
            <?php endforeach;?>
          </div>
        </div>
      </div>
    </li>
  <?php endforeach;?>
</ul>
<div class="main-width align-center page js-news-page"><?php echo $pageShow;?></div>
<script>
$(function(){
  $(".comment-img a").lightbox({
    loopImages: true,
    fileLoadingImage: '/statics/front/images/loading.gif',
    fileBottomNavCloseImage: '/statics/front/images/close.png'
  });
});
</script>